import React from "react"

import { StyleSheet } from "react-native"
import { Button, Icon } from 'react-native-elements'

class Component extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
    let {
      heart = false,
      num = 0,
    } = this.props

    return (
      <Button
        titleStyle={styles.title}
        buttonStyle={styles.btn}
        type="clear"
        icon={this.renderIcon(heart)}
        title={num.toString()}
      />
    )
  }

  renderIcon(heart) {
    let icon = <Icon type="ionicon" name="heart-outline" size={20} />

    if (heart === true) {
      icon = <Icon type="ionicon" name="heart" size={20} color="#f44336" />
    }

    return icon
  }
}

const styles = StyleSheet.create({
  btn: {
    color: '#A0AEC0',
    borderRadius: 99,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  title: {
    // color: '#A0AEC0',
    fontSize: 14
  }
})

export default Component
